<template>
  <div class="container" v-if="resultDetails">
    <!-- <div style="min-height: 500px;width: 100%;" v-if="resultDetails.result.infoContentList.length>0&&!isConfrimInfo">
      <div class="getInfoBox">
        <p style="padding-bottom: 20px;font-size: 24px;color: #999;">收集信息详情</p>
        <el-form label-width="120px" label-position="left" inline>
          <el-form-item class="getInfoBoxItem" :label="Object.keys(infoContent)[0]+':'" v-for="infoContent in resultDetails.result.infoContentList" >
            <el-input readonly type="text" v-model="infoContent[Object.keys(infoContent)[0]]"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div> -->
    <div class="taskBox" style="min-height: 500px;">
      <!-- <p style="font-weight: 600;font-size: 24px;">{{taskItemInfo.task.category}}</p> -->
      <div style="margin-left: 15px;margin-top: 10px;">
        <p style="font-weight: 600;font-size: 22px;">{{assessIndex+1+'.'+taskItemInfo.task.taskName}}</p>
        <el-form label-position="top" style="margin-top: 20px;">
          <div style="flex: 1;margin-bottom: 10px;">
            <p style="font-weight: 600;font-size: 18px;">评分标准</p>
            <div style="color: #8592a6;line-height: 22px;font-size: 14px;margin-top: 5px;">
              {{taskItemInfo.task.standard}}
            </div>
          </div>
          <el-form-item style="" >
            <span style="color: #606266;margin-right: 10px;">评分:</span><el-input-number onkeydown="if (event.keyCode===13){return false;}" :disabled='resultExtends.length>0' :max="taskItemInfo.task.score" :min="0" placeholder="请输入您的审批分数" controls-position="right" style="width: 30%;" v-model.number="taskItemInfo.score"></el-input-number>
            <span style="">限额{{taskItemInfo.task.score}}分</span>
            <!-- <span style="color: #606266;margin-right: 10px;">审批得分:</span><el-input-number :max="10" style="width: 30%;" :min="0" controls-position="right" placeholder="请输入您的审批分数" v-model.number="submitObj.task[assessIndex].score"></el-input-number> -->

          </el-form-item>
          <el-form-item style="margin-top: 20px;" v-if="taskItemInfo.task.isFile&&taskItemInfo.task.isExtend==1">
            <el-table
                ref="multipleTable"
                :data="resultExtends"
                tooltip-effect="dark"
                border
                >
                <el-table-column
                  label="等级"
                  width="120"
                  prop='itemType'
                  >
                </el-table-column>
                <el-table-column
                  label="名称"
                  width="280"
                  prop='itemName'
                  >
                </el-table-column>
                <el-table-column
                  label="评分"
                  width="150"
                  >
                  <template slot-scope="scope">
                    <el-input-number onkeydown="if (event.keyCode===13){return false;}" size="small" @change='scoreChange(true,scope.row)'  :max="taskItemInfo.score" :min="0" controls-position="right" placeholder='自评分数' v-model="scope.row.score"></el-input-number>
                  </template>
                </el-table-column>
                <el-table-column
                  label="备注"
                  width="260"
                  prop='note'
                  >
                </el-table-column>
              </el-table>
          </el-form-item>
        </el-form>
        <div style="position: relative;margin-right: 10px;" class="pdfBox scroll" v-if="showPdf&&taskItemInfo.task.isFile&&pdfList.length>0">
          <el-tabs v-model="activePdf" type="card" >
              <el-tab-pane :label="'附件'+(index+1)" :name="index.toString()" v-for="(pdfDoc,index) in pdfList" :key="index">
                <canvas-preview  :key="index" :index="index" :flag="'examine'" :pdfUrl='pdfDoc'></canvas-preview>
              </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <div style="float: right;margin-top: 30px;margin-left: 10px;" v-if="isSubmit"><el-button @click="nextAssess(true)" size="medium" type="primary">下一指标</el-button></div>
    <div style="float: right;margin-top: 30px;margin-left: 10px;" v-else><el-button @click="submitApprove(0)" size="medium" type="primary">提交</el-button></div>
    <div style="float: right;margin-top: 30px;margin-left: 10px;"><el-button @click="nextAssess(false)" size="medium" >上一指标</el-button></div>
    <div style="float: right;margin-top: 30px;"><el-button type="info" @click="openRepulse=true" size="medium" >打回</el-button></div>
    <div style="position: absolute;left:100%;top: 0;width: 50%;" >
      <assess-select @assessChange='assessChange' :assessCategoryInfo='assessCategoryInfo' :assess-count="resultDetails.length" :assessIndex='assessIndex+1'></assess-select>
    </div>
    <el-dialog
      title="打回意见"
      :visible.sync="openRepulse"
      center
      width="40%">
      <el-input type="textarea" placeholder="请输入您的打回意见" rows="5" v-model="submitObj.opinion"></el-input>
      <span slot="footer">
        <el-button @click="openRepulse = false">取 消</el-button>
        <el-button type="primary" @click="submitApprove(1)">确定打回</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import canvasPreview from "@/components/canvasPreviewPdf.vue"
  import assessSelect from "@/components/assessSelect.vue"
  export default{
    name: "examineDetails",
    data(){
      return {
        // 用户自评详情列表
        resultDetails:null,
        assessIndex:0,
        pdfList:[],
        // isConfrimInfo:true,
        //控制pdf展示组件的标识
        showPdf:false,
        // 当前展示pdf于list中的位置
        nowPdfIndex:0,
        // opinion:'',
        // 打回对话框标识
        openRepulse:false,
        // 最后提交的信息
        submitObj:{
          pId:parseInt(this.$route.query.pId),
          uId:parseInt(this.$route.query.uId),
          opinion:'',
          isFlag:0,
          results:[]
        },
        activePdf:0,
        assessCategoryInfo:[]
      }
    },
    components:{
      canvasPreview,
      assessSelect
    },
    methods:{
      assessChange(val){
        console.log(val)
        this.assessIndex=val
        this.nowPdfIndex=val
        this.getPdf()
      },
      async initResultDetails(){
        let result=await this.$get('/api/approval/result',{pId:this.$route.query.pId,uId:this.$route.query.uId})
        // if(result.data.result.infoContentList.length==0)this.isConfrimInfo=true
        this.resultDetails=result.data.results
        if(this.resultDetails[0].task.isFile){
         this.showPdf=true
         this.pdfList=this.resultDetails[0].evidenceList
        }
        let categoryInfoArr=[]
        // 考核点类别
        let categorySet=new Set()
        let categoryArr=[]
        let arr=[]
        result.data.results.forEach(item=>arr.push(item.task))
        arr.forEach((item,index)=>{
          categorySet.add(item.category)
        })
        categoryArr=[...categorySet]
        let index=0
        categoryArr.forEach(item=>{
          let list=[]
          let tempCategoryArr=arr.filter(items=>items.category==item)
          tempCategoryArr.forEach(item=>{
            list.push({index,item:this.resultDetails[index]})
            index++
          })
          this.assessCategoryInfo.push({title:item,list})
          categoryInfoArr.push(...tempCategoryArr)
        })

      },
      nextAssess(flag){
        // if(!this.isConfrimInfo&&flag) return this.isConfrimInfo=true
        // if(this.assessIndex==0&&!flag) return this.isConfrimInfo=false
        flag?this.assessIndex++:this.assessIndex--
        this.activePdf='0'
        if(this.taskItemInfo.task.isFile) {
          this.getPdf()
          flag?this.nowPdfIndex++:this.nowPdfIndex--
        }
      },
      getPdf(){
        // let obj=this.resultDetails.result.evidenceList[this.nowPdfIndex]
        // this.pdfList=obj[Object.keys(obj)[0]]
        this.pdfList=this.taskItemInfo.evidenceList
        this.activePdf='0'
        this.showPdf=false
        this.$nextTick(()=>{
          this.showPdf=true
        })
      },
      scoreChange(flag,row){
        if(flag){
          let score=0
          this.resultExtends.map(item=>score+=item.score)
          if(score>this.taskItemInfo.task.score) {
            this.$message.info('扩展项总分不能大于该考核点最高分')
            this.$nextTick(()=>{
              this.taskItemInfo.score=score-row.score
              row.score=0
              })
          }else{
            this.taskItemInfo.score=score
          }
        }
        // this.pushInfo.resultList[this.assessIndex].scoreChange=true
      },
      // isFlag 1为打回0为提交
      submitApprove(isFlag){
        if(isFlag&&this.submitObj.opinion=='') return this.$message.warning('请输入您的打回意见')
         this.$confirm(isFlag?'确认将改用户提交的结果打回？':'确定提交改审批结果？', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                }).then(async () => {
                    let flag=true
                    let assIndex=0
                    // for(let item of this.resultDetails.task){
                    //   assIndex++
                    //   for(let items=0;items<item.children.length;items++){
                    //     if(item.children[items].reRevolution)obj.score+=item.children[items].reRevolution
                    //     else {
                    //       flag=false
                    //     }
                    //   }
                    //   if(!flag) break
                    // }
                  // if(!flag&&!isFlag) return this.$message.warning('第'+assIndex+'题还未填写审批分数')
                  this.submitObj.isFlag=isFlag
                  this.submitObj.results=this.resultDetails
                  console.log(this.submitObj)
                  let result=await this.$post('/api/submit/approve',this.submitObj)
                  if(result.code!=200) return this.$message.error(result.msg)
                  this.$message.success(isFlag?'打回成功':'审批成功')
                  this.openRepulse=false
                  this.$router.back()
                })
      }
    },
    mounted(){
      this.$nextTick(()=>{
        this.$store.commit('setTabs',{
          name: '/home/examineDetails?pId='+this.$route.query.pId+'&uId='+this.$route.query.uId,
          title: "项目审核"
        })
      })
      this.initResultDetails()
      this.$on('assessChange',index=>this.assessIndex=index)
    },
    computed:{
      taskItemInfo(){
        return this.resultDetails[this.assessIndex]
      },
      isSubmit(){
        return this.assessIndex<this.resultDetails.length-1
      },
      resultExtends(){
        return this.resultDetails[this.assessIndex].resultExtends
      }
    }
  }
</script>

<style scoped lang="scss">
  .container{
    width: 65%;
    height: 100%;
    position: relative;
  }
  .infoBox{
    display: flex;
    flex-wrap: wrap;
    color: #606266;
    .getInfoValue{
      width: 40%;
      margin-right: 20px;
    }
  }
  /deep/ .el-input{
    display: inline-block;
    margin-right: 1%;
  }
  .getInfoBox{
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding: 20px;
    min-height: 500px;
    .getInfoBoxItem{
      width: 50%;
      box-sizing: border-box;border: 1px solid #999;
      margin: 0;
      padding: 10px 20px;
    }
    .getInfoBoxItem:nth-child(2n){
      border-left: 0;
    }
    .getInfoBoxItem:nth-of-type(n+4){
      border-top: 0;
    }
  }
  .pdfBox{
    height: 500px;
    overflow: auto;
    margin-top: 30px;
  }
  .scroll {
      overflow: auto;
     }

     .scroll::-webkit-scrollbar {
      width: 4px;
     }

     .scroll::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: #444;
     }

     .scroll::-webkit-scrollbar-track {
      border-radius: 0;
      background-color: rgba(0 ,0 , 0 , .1 );
     }
   /deep/ .el-tabs__header{
     position: sticky;
     background-color: white;
     top: 0;
     z-index: 2;
   }
   /deep/ .el-radio-group{
     display: flex;
     justify-content: start;
     flex-wrap: wrap;
     label{
      margin: 0 10px;
      margin-bottom: 20px;
      .el-radio-button__inner,div{
        width: 60px;
        border-left: 1px solid #DCDFE6;
      }
      .el-radio-button__orig-radio:checked+.el-radio-button__inner{
        border-left: 0;
      }
    }
   }
   /deep/ .cell{
     overflow: initial;
   }
</style>
